<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动定位</title>
		<style>
			div.d1{
				width: 300px;
				height: 300px;
				font-family: sans-serif;
				font-size: 10em;
				border-radius: 50%;
				text-align: center;
				line-height: 300px;
				background-color: #00ff7f;
				box-shadow: 5px 5px 100px 20px #00ffff inset;
				float: left;
				float: right;
				fl oat: none;
			}
			div.d2{
				width: 300px;
				height: 300px;
				font-family: sans-serif;
				font-size: 10em;
				border-radius: 50%;
				text-align: center;
				line-height: 300px;
				background-color: #00ffff;
				box-shadow: 5px 5px 100px 20px #00ffff inset;
				float: left;
				float: right;
				fl oat: none;
			}
			div.d3{
				width: 300px;
				height: 300px;
				font-family: sans-serif;
				font-size: 10em;
				border-radius: 50%;
				text-align: center;
				line-height: 300px;
				background-color: #00ffff;
				box-shadow: 5px 5px 100px 20px #00ffff inset;
				float: left;
				float: right;
				fl oat: none;
				clear: left;
			}
			div.d4{
				width: 300px;
				height: 300px;
				font-family: sans-serif;
				font-size: 10em;
				border-radius: 50%;
				text-align: center;
				line-height: 300px;
				background-color: #00ffff;
				box-shadow: 5px 5px 100px 20px #00ffff inset;
		d		float: left;
				float: right;
				fl oat: none;
				clear: both;
			}
			div.d5{
				width: 300px;
				height: 300px;
				font-family: sans-serif;
				font-size: 10em;
				border-radius: 50%;
				text-align: center;
				line-height: 300px;
				background-color: #00ffff;
				box-shadow: 5px 5px 100px 20px #00ffff inset;
				float: left;
				float: right;
				fl oat: none;
			}
		</style>
	</head>
	<body>
		<div class="d1">1</div>
		<div class="d2">2</div>
		<div class="d3">3</div>
		<div class="d4">4</div>
		<div class="d5">5</div>
	</body>
</html>